<template>
    <view class="container">
        <view class="vehicle-info-card">
            <!--顶部 -->
            <view class="vehicle-details">
                <view class="gray-background">
                    <view>
                        <text class="plate-number">青年路客运站-黄山市综合客运站1</text>
                    </view>
                    <view class="details">
                        <view class="detail-item">普通</view>
                    </view>
                    <!--          添加下划线-->
                    <!--          <view class="details">-->
                    <!--            <view class="detail-item" style="text-decoration: underline;"></view>-->
                    <!--          </view>-->
                    <view class="details">
                        <view class="detail-item">营运状态：营运</view>
                        <view class="detail-item">发放日期：2024-06-24</view>
                    </view>
                </view>
            </view>

            <!-- Tabs Section -->
            <up-tabs
                    class="up-tabs-content"
                    :list="carsDataDetails"
                    @click="onTabClick"
                    :lineWidth="lineWidth"
                    lineColor="#2877FF"
                    :activeStyle="activeTabStyle"
                    :inactiveStyle="inactiveTabStyle"
                    itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
            />

            <!-- Tab Content -->
            <view v-if="activeTab === 'personInfo'" class="tab-content">
                <view
                        class="info-row"
                        v-for="(value, label) in personInfo"
                        :key="label"
                >
                    <text class="vehiclelabel">{{ label }}</text>
                    <text class="vehiclevalue">{{ value }}</text>
                </view>
            </view>
            <view v-if="activeTab === 'certInfo'" class="tab-content">
                <view
                        class="info-row"
                        v-for="(value, label) in certInfo"
                        :key="label"
                >
                    <text class="vehiclelabel">{{ label }}</text>
                    <text class="vehiclevalue">{{ value }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
  export default {
    data() {
      return {
        carsDataDetails: [
          {name: "线路详情", id: "personInfo"},
        ],
        activeTab: "personInfo", // 默认显示人员信息
        lineColor: "#2877FF", // Tab 下划线颜色
        personInfo: {
          计划编号: "",
          始发客运站: "身份证",
          终点客运站: "421087198208241316",
          停靠站点: "汉",
          日发班次: "15236895691",
          客车数量: "湖北省荆州市",
          车辆类型: "本科",
          客车等级: "高级",
          客座位数: "健康",
          营运类型: "421002",
          班线类别: "421002",
          经营方式: "421002",
          对开业户: "421002",
          开班日期: "421002",
          有效日期: "421002",
          截止日期: "421002",
          营运状态: "421002",
          备注: "421002",
          地区代码: "421002",
        },
      };
    },
    mounted() {
    },
    computed: {
      lineWidth() {
        return this.calculateTextWidth(this.activeTab);
      },
      activeTabStyle() {
        return {
          color: "#2877FF",
          fontWeight: "bold",
          transform: "scale(1.05)",
        };
      },
      inactiveTabStyle() {
        return {
          color: "#606266",
          transform: "scale(1)",
        };
      },
    },
    methods: {
      calculateTextWidth(text) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        context.font = "16px Arial";
        return context.measureText(text).width;
      },
      onTabClick(tab) {
        console.log("Tab clicked:", tab);
        if (tab && tab.index >= 0 && tab.index < this.carsDataDetails.length) {
          this.activeTab = this.carsDataDetails[tab.index].id;
        } else {
          console.error("Invalid tab index:", tab);
        }
      },
    },
  };
</script>

<style scoped lang="scss">
    .container {
        padding: 10px;
        background: #f3f6fa;
        height: 100vh;

        .vehicle-info-card {
            background-color: white;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    }

    .vehicle-details {
        border-radius: 8px;
        margin-bottom: 20px;

        .vehicle-title {
            font-size: 14px; /* Slightly decreased font size */
            margin-bottom: 10px;
            color: #333333;
            font-weight: 300;
        }

        .gray-background {
            background-color: #fafafb;
            padding: 10px;
            border-radius: 8px;

            .details {
                display: flex;
                flex-wrap: wrap;
                color: #606266;
                font-size: 12px;
                color: #79829c;

                .detail-item {
                    flex: 1 1 50%;
                    margin-bottom: 10px;
                }
            }
        }
    }

    .tab-content {
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .vehiclelabel {
                color: #79829c;
            }

            .vehiclevalue {
                color: #0d1444;
            }
        }
    }

    //tab切换栏样式
    .up-tabs-content {
        margin-bottom: 20px;
    }
</style>
